Components

Picklist

Picklists, commonly known as dropdown menus, allow the user to select one option or multiple options from a list. Picklists are used instead of radio lists and checkbox lists inside of a larger form. They provide more flexibility in the number of options the user can choose from.

BaseBase › ClosedBase › OpenBase › Item selectedBase › Multiple items selectedBase › Closed - Multiple items selectedBasedev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click">
  <button class="slds-button slds-button--neutral slds-picklist__label" aria-haspopup="true">
    <span class="slds-truncate" title="Select an Option">Select an Option</span>
    <svg aria-hidden="true" class="slds-icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
  </button>
  <div class="slds-dropdown slds-dropdown--left">
    <ul class="slds-dropdown__list slds-dropdown--length-5" role="menu">
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitemcheckbox" tabindex="-1">
          <span class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option A</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitemcheckbox" tabindex="-1">
          <span class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option B</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitemcheckbox" tabindex="-1">
          <span class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option C</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitemcheckbox" tabindex="-1">
          <span class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option D</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitemcheckbox" tabindex="-1">
          <span class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option E</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitemcheckbox" tabindex="-1">
          <span class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option FGHIJKLMNOPQRSTUVWXYZ</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Component Overview

A picklist extends a menu dropdown.

A picklist is a list of actionable items that is invoked by selection of a particular item. That value is then shown as selected and its value is updated within the .slds-picklist__label.

A multi-select picklist is a list of actionable items that is invoked by selection of a particular item(s). The multi-select picklist can have more than one selected option. When more than one option has been selected, the .slds-picklist__label test should update with the total number of selected items, such as "3 options selected". When the picklist loses focus but has items selected, a .slds-pill_container--bare should be display below the .slds-picklist__label with the selected items in pills, allowing a user to easily remove selected items.

The unordered menu list with [role="menu"] should be contained in a <div> with the class .slds-dropdown. The exception to this is the Action Overflow for Touch, which not a dropdown menu.

The target HTML element and dropdown need to be wrapped in the class .slds-dropdown-trigger dropdown-trigger--click.

Accessibility

The main thing that distinguishes menus from other popover blocks is keyboard navigation: elsewhere, users press the Tab key to navigate through actionable items, but in a menu, users press the arrow keys to navigate.

Expected markup:

  • Menu trigger is a focusable element (<a> or <button>) with aria-haspopup="true"
  • Menu has role="menu" and an aria-labelledby attribute whose value is the id of the menu trigger
  • Menu items have role="menuitem", role="menuitemcheckbox", or role="menuitemradio"

Expected keyboard interactions:

  • Arrow keys cycle focus through menu items (you should use JS to disable focus for any disabled items)
  • Tab key closes menu and moves focus to the next focusable element on the page
  • Esc key closes menu and moves focus back to the menu trigger
  • Any character key moves focus to the next menu item that starts with that character, if applicable

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-picklist
Applied to:

<div>

Outcome:

Initializes picklist

Required:

Required

Comments:

--

.slds-picklist--fluid
Applied to:

.slds-picklist

Outcome:

Forces width of picklist and picklist dropdown to inherit width of its content

Required:

No, optional element or modifier

Comments:

--

.slds-picklist__label
Applied to:

<button>

Outcome:

Custom select

Required:

Required

Comments:

--